<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <iframe id='HtmlEdit' style="width:400px; height: 300px" marginWidth='2px' marginHeight='2px'></iframe>
  <div id="butGroup">
    <button id="bold">加粗</button>
    <button id="copy">复制</button>
    <button id="big">变大</button>
    <button id="italic">斜体</button>
    <button id="underline">下划线</button>
    <button id="hiliteColor">背景色</button>

    <button id="save">上传</button>
  </div>

  <!-- <div id="box" style="height: 300px;width: 400px;border: 1px solid black"> -->

  </div>

</body>

</html>
<script>
  const editor = document.getElementById("HtmlEdit").contentWindow;//获取iframe Window 对象
  const doc = document.getElementById("HtmlEdit").contentDocument; //获取iframe documen 对象
  const butGroup = document.getElementById('butGroup');
  const box = document.getElementById('box');
  //只需键入以下设定，iframe立刻变成编辑器。
  editor.document.designMode = 'On';  //打开设计模式
  editor.document.contentEditable = true;// 设置元素为可编辑
  //设置事件监听
  butGroup.onclick = function (evt) {
    let e = evt || window.event
    let targetId = e.target.id
    //获取点击的标签的id
    switch (targetId) {
      case 'bold': addBold(); break;
      case 'big': big(); break;
      case 'copy': copy(); break;
      case 'italic': italic(); break
      case 'hiliteColor': hiliteColor(); break;
      case 'underline': underline(); break;
      case 'save': save(); break
    }
  }
  //字体变大方法
  function big() {
    //所有字体特效只是使用 execComman() 就能完成。
    editor.document.execCommand("fontSize", true, 5);
  }
  //复制方法
  function copy() {
    editor.document.execCommand("copy", true, null);
  }
  //加粗方法
  function addBold() {
    editor.document.execCommand("Bold", true, null);
  }
  //斜体方法
  function italic() {
    editor.document.execCommand('italic', true, null)
  }
  //加背景色
  var hiliteColor = () => { editor.document.execCommand('hiliteColor', true, 'yellow') }  //ES6 的箭头函数写法

  //加下划线方法
  var underline = () => { editor.document.execCommand('underline', true, null) }  //ES6 的箭头函数写法

  //上传方法
  function save() {
    box.innerHTML = doc.body.innerHTML;
  }

</script>